<template>
  <scroll-view
    :class="['grace-nav-bar', isCenter ? 'grace-nav-center' : '']"
    :scroll-x="true"
    :scroll-left="sLeft"
    :scroll-into-view="'tab-'+currentIndex"
  >
    <view
      class="nav-item"
      :id="'tab-'+index"
      :style="{width:size+'rpx', marginRight:margin+'rpx'}"
      v-for="(item, index) in items"
      :key="index"
      @click="navchang(index,item)"
      :data-index="index"
    >
      <view class="nav-item-main">
        <view
          :class="['nav-item-title', currentIndex == index ? 'nav-active' : '']"
          :style="{color:currentIndex == index ? activeColor : color, textAlign : textAlign, lineHeight:lineHeight, fontSize:fontSize}"
        >{{item.windowName}}</view>
        <view
          class="nav-active-line"
          v-if="currentIndex == index"
        ></view>
      </view>
    </view>
  </scroll-view>
</template>
<script>
export default {
  onLoad() {

  },
  props: {
    sLeft: {
      type: Number,
      default: 0
    },
    isCenter: {
      type: Boolean,
      default: false
    },

    currentIndex: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 120
    },
    items: {
      type: Array,
      default: function () {
        return []
      }
    },
    activeLineBg: {
      type: String,
      default: "linear-gradient(to right, #66BFFF,#3388FF)"
    },
    activeColor: {
      type: String,
      default: "#2d5dd9"
    },
    activeLineHeight: {
      type: String,
      default: '6rpx'
    },
    activeLineWidth: {
      type: String,
      default: "36rpx"
    },
    color: {
      type: String,
      default: "#333333"
    },
    margin: {
      type: Number,
      default: 0
    },
    textAlign: {
      type: String,
      default: 'center'
    },
    lineHeight: {
      type: String,
      default: '50rpx'
    },
    fontSize: {
      type: String,
      default: '28rpx'
    }
  },
  methods: {
    navchang: function (i, item) {
      console.log(this.currentIndex)
      this.$emit('change', { index: i, id: item.windowId })
    }
  }
}
</script>
<style>
.grace-nav-bar {
  width: 100%;
  display: flex;
  white-space: nowrap;
  padding-bottom: 10rpx;
  height: 58upx;
  border-bottom: 1px solid #eee;
}
.nav-item {
  width: 100rpx;
  display: inline-flex;
}
.nav-item-main {
  width: 100%;
}
.nav-item-title {
  font-size: 28rpx;
  line-height: 50rpx;
  width: 100%;
  color: #333333;
}
.nav-active {
  font-size: 30rpx;
  font-weight: bold;
}
.nav-active-line {
  position: relative;
}
.nav-active-line:after {
  content: '';
  height: 4upx;
  width: 60%;
  position: absolute;
  left: 50%;
  bottom: -10upx;
  transform: translateX(-50%);
  background: #2d5dd9;
}
.grace-nav-center {
  justify-content: center;
  text-align: center;
}
</style>